@@include('header.htm', {
  "title": "Input Group - Sleek Admin Dashboard Template",

	"vector_map": "",

	"date_range_picker": "",

	"select2": "",

	"ladda": "",

	"toastr": "",

	"flag_icon": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",

	"data_table": "",

	"responsive_data_table": "",

	"expendable_data_table": ""
})

@@include('sidebar.htm', {
	"parent": "forms",
	"sub_parent": "forms",
	"active": "input-group"
})

@@include('top-bar.htm')




<div class="row">
	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Basic Example</h2>
			</div>
			<div class="card-body">
				<form>
					<div class="form-group">
						<label for="validationDefaultUsername">Left addon</label>
						<div class="input-group">
							<div class="input-group-prepend">
								<span class="input-group-text" id="inputGroupPrepend2">@</span>
							</div>
							<input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2"
							required>
						</div>
					</div>
					<div class="form-group">
						<label for="validationDefaultUsername2">Left addon</label>
						<div class="input-group">
							<input type="text" class="form-control" id="validationDefaultUsername2" placeholder="Username" aria-describedby="inputGroupPrepend2"
							required>
							<div class="input-group-append">
								<span class="input-group-text" id="inputGroupAppend">@ example.com</span>
							</div>
						</div>
					</div>
					<div class="form-group">
						<label for="validationDefaultUsername2">Left and Right addon</label>
						<div class="input-group">
							<div class="input-group-prepend">
								<span class="input-group-text">$</span>
							</div>
							<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
							<div class="input-group-append">
								<span class="input-group-text">.00</span>
							</div>
						</div>
					</div>
					<div class="form-group">
						<label for="validationDefaultUsername2">Joint addons</label>
						<div class="input-group mb-3">
							<div class="input-group-prepend">
								<span class="input-group-text">$</span>
								<span class="input-group-text">0.00</span>
							</div>
							<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
						</div>
					</div>
				</form>
			</div>
		</div>

		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Checkboxes and Radio Addons</h2>
			</div>
			<div class="card-body">
				<form >
					<div class="row">
						<div class="col-md-6">
							<label class="text-dark font-weight-medium" for="">Left checkbox addon</label>
							<div class="input-group">
								<div class="input-group-prepend">
									<div class="input-group-text">
										<label class="control control-checkbox d-inline-block pl-3">
											<input type="checkbox" name="checkbox1" />
											<div class="control-indicator"></div>
										</label>
									</div>
								</div>
								<input type="text" class="form-control" aria-label="Text input with checkbox">
							</div>
						</div>
						<div class="col-md-6">
							<label class="text-dark font-weight-medium" for="">Left Radio addon</label>
							<div class="input-group">
								<div class="input-group-prepend">
									<div class="input-group-text">
										<label class="control control-radio d-inline-block pl-3">
											<input type="radio" name="radio1" />
											<div class="control-indicator"></div>
										</label>
									</div>
								</div>
								<input type="text" class="form-control" aria-label="Text input with radio button">
							</div>
						</div>
						<div class="col-md-6">
							<label class="text-dark font-weight-medium" for="">Right checkbox addon</label>
							<div class="input-group">
								<input type="text" class="form-control" aria-label="Text input with checkbox">
								<div class="input-group-append">
									<div class="input-group-text">
										<label class="control control-checkbox d-inline-block pl-3">
											<input type="checkbox" />
											<div class="control-indicator"></div>
										</label>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<label class="text-dark font-weight-medium" for="">Right Radio addon</label>
							<div class="input-group">
								<input type="text" class="form-control" aria-label="Text input with radio button">
								<div class="input-group-append">
									<div class="input-group-text">
										<label class="control control-radio d-inline-block pl-3">
											<input type="radio" />
											<div class="control-indicator"></div>
										</label>
									</div>
								</div>
							</div>
						</div>
						<div class="col-12">
							<label class="text-dark font-weight-medium" for="">Left and Right checkbox addon</label>
							<div class="input-group">
								<div class="input-group-prepend">
									<div class="input-group-text">
										<label class="control control-checkbox d-inline-block pl-3">
											<input type="checkbox" />
											<div class="control-indicator"></div>
										</label>
									</div>
								</div>
								<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
								<div class="input-group-append">
									<div class="input-group-text">
										<label class="control control-checkbox d-inline-block pl-3">
											<input type="checkbox" />
											<div class="control-indicator"></div>
										</label>
									</div>
								</div>
							</div>
						</div>
						<div class="col-12">
							<label class="text-dark font-weight-medium" for="">Left and Right radio addon</label>
							<div class="input-group">
								<div class="input-group-prepend">
									<div class="input-group-text">
										<label class="control control-radio d-inline-block pl-3">
											<input type="radio" />
											<div class="control-indicator"></div>
										</label>
									</div>
								</div>
								<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
								<div class="input-group-append">
									<div class="input-group-text">
										<label class="control control-radio d-inline-block pl-3">
											<input type="radio" />
											<div class="control-indicator"></div>
										</label>
									</div>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>

		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Buttons with Dropdowns</h2>
			</div>
			<div class="card-body">
				<form >
					<label class="text-dark font-weight-medium" for="">Left addon</label>
					<div class="input-group">
						<div class="input-group-prepend">
							<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">Action</button>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
								<div role="separator" class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
						<input type="text" class="form-control" aria-label="Text input with dropdown button">
					</div>

					<label class="text-dark font-weight-medium" for="">Left addon</label>
					<div class="input-group">
						<div class="input-group-prepend">
							<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">Action</button>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
								<div role="separator" class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
						<input type="text" class="form-control" aria-label="Text input with dropdown button">
					</div>
					<label class="text-dark font-weight-medium" for="">Right addon</label>
					<div class="input-group">
						<input type="text" class="form-control" aria-label="Text input with dropdown button">
						<div class="input-group-append position-relative">
							<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">Action</button>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#">Action</a>
								<a class="dropdown-item" href="#">Another action</a>
								<a class="dropdown-item" href="#">Something else here</a>
								<div role="separator" class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Separated link</a>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>

	</div>
	<div class="col-lg-6">

		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Iconic Input Groups </h2>
			</div>
			<div class="card-body">
				<form>
					<label class="text-dark font-weight-medium" for="">Left icon</label>
					<div class="input-group">
						<div class="input-group-prepend">
							<span class="input-group-text">
								<i class="mdi mdi-account"></i>
							</span>
						</div>
						<input type="text" class="form-control" placeholder="Username" aria-label="Username">
					</div>
					<label class="text-dark font-weight-medium" for="">Right icon</label>
					<div class="input-group">
						<input type="text" class="form-control" placeholder="Right icon" aria-label="Right icon">
						<div class="input-group-append">
							<span class="input-group-text">
								<i class="mdi mdi-settings"></i>
							</span>
						</div>
					</div>
					<label class="text-dark font-weight-medium" for="">Icon with Text</label>
					<div class="input-group">
						<div class="input-group-prepend">
							<span class="input-group-text">
								<i class="mdi mdi-folder mr-2"></i> example.com </span>
						</div>
						<input type="text" class="form-control" placeholder="" aria-label="">
					</div>
					<label class="text-dark font-weight-medium" for="">Left & Right icon</label>
					<div class="input-group">
						<div class="input-group-prepend">
							<span class="input-group-text">
								<i class="mdi mdi-star"></i>
							</span>
						</div>
						<input type="text" class="form-control" placeholder="" aria-label="">
						<div class="input-group-append">
							<span class="input-group-text">
								<i class="mdi mdi-map-marker"></i>
							</span>
						</div>
					</div>
					<label class="text-dark font-weight-medium" for="">Joint icon</label>
					<div class="input-group">
						<div class="input-group-prepend">
							<span class="input-group-text">
								<i class="mdi mdi-email"></i>
							</span>
							<span class="input-group-text">0.00 </span>
						</div>
						<input type="text" class="form-control" placeholder="" aria-label="">
					</div>
				</form>
			</div>
		</div>

		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Button Addon</h2>
			</div>
			<div class="card-body">
				<label class="text-dark font-weight-medium" for="">Left addon</label>
				<div class="input-group">
					<div class="input-group-prepend">
						<span class="input-group-text"> Go! </span>
					</div>
					<input type="text" class="form-control" placeholder="Search for..." aria-label="">
				</div>
				<label class="text-dark font-weight-medium" for="">Left addon</label>
				<div class="input-group">
					<div class="input-group-prepend">
						<span class="input-group-text bg-primary"> Go! </span>
					</div>
					<input type="text" class="form-control" placeholder="Search for..." aria-label="">
				</div>
				<label class="text-dark font-weight-medium" for="">Right icon</label>
				<div class="input-group">
					<input type="text" class="form-control" placeholder="Search for..." aria-label="search">
					<div class="input-group-append">
						<span class="input-group-text bg-primary"> GO! </span>
					</div>
				</div>
			</div>
		</div>
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Iconic Sizing</h2>
			</div>
			<div class="card-body">
				<label class="text-dark font-weight-medium" for="">Small Size</label>
				<div class="input-group input-group-sm">
					<div class="input-group-prepend">
						<span class="input-group-text" id="inputGroup-sizing-sm">
							<i class="mdi mdi-account"></i>
						</span>
					</div>
					<input type="text" class="form-control" aria-label="Small" placeholder="Small Size" aria-describedby="inputGroup-sizing-sm">
				</div>

				<label class="text-dark font-weight-medium" for="">Default Size</label>
				<div class="input-group">
					<div class="input-group-prepend">
						<span class="input-group-text" id="inputGroup-sizing-default">
							<i class="mdi mdi-account"></i>
						</span>
					</div>
					<input type="text" class="form-control" aria-label="Default" placeholder="Default size" aria-describedby="inputGroup-sizing-default">
				</div>

				<label class="text-dark font-weight-medium" for="">Large Size</label>
				<div class="input-group input-group-lg">
					<div class="input-group-prepend">
						<span class="input-group-text" id="inputGroup-sizing-lg">
							<i class="mdi mdi-account"></i>
						</span>
					</div>
					<input type="text" class="form-control" aria-label="Large" placeholder="Large size" aria-describedby="inputGroup-sizing-sm">
				</div>
			</div>
		</div>
	</div>
</div>




@@include('footer.htm', {

	"chart_js": "",
	"chartjs": "",

	"google_map": "",
	"mapjs": "",

	"vector_map": "",
	"vector_map_world_mill": "",
	"vector_map_js": "",
	
	"date_range_picker_moment": "",
	"date_range_picker": "",
	"date_range_js": "",

	"select2": "",

	"ladda_spin": "",
	"ladda": "",

	"jquery_mask": "",

	"toastr": "",

	"circle_progress": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",
	"full_calendar_js": "",

	"data_table": "",
	"data_table_bootstrap4": "",

	"responsive_data_table": ""
})
